<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/static/css/weui.css"/>
    <link rel="stylesheet" href="/static/css/weuix.css"/>

    <script src="/static/js/zepto.min.js"></script>
	<script src="/static/js/qrcode.js"></script>
    <script src="/static/js/zepto.weui.js"></script>
    <script src="/static/js/lrz.min.js"></script>
</head>

<body ontouchstart>
<div class="page-hd">
    <h1 class="page-hd-title">
        合成大西瓜素材处理
    </h1>
    <a href="http://mp.weixin.qq.com/s?__biz=MzI0NTg3MTMwNw==&mid=100001662&idx=1&sn=9149ff0dd9a48c9caae722be41b5195e&chksm=6946a0da5e3129cca80ae42dca0a397359c84201a45756af31cae7012eea3b53ab9ebeec7dee#rd"  class="page-hd-desc" id="show">给我一碗炒饭出品</a>
	<div class="btnclass">
	<a href="http://mp.weixin.qq.com/s?__biz=MzI0NTg3MTMwNw==&mid=100001717&idx=1&sn=533d2acfcd3616f11b2726e80b15eede&chksm=6946a0115e31290759617e0e60fa4afd4b17c95ceac2c2987830564a17160f8a35af8eac28d5#rd" class="weui-btn weui-btn_mini weui-btn_primary">使用教程点我</a>
	<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=wrWG8pFTRKSJiQv6KAqTBjokuEHYx2i-&jump_from=webapi" href="javascript:;" class="weui-btn weui-btn_mini weui-btn bg-orange">点我加入聊天吹水群：796644108</a>
	<a href="https://gitee.com/dancedj/xigua_img" class="weui-btn weui-btn_mini weui-btn bg-blue">gitee开源</a>
	</div>
</div>
<div id="showinfo" hidden>
	<div class="weui-cells__title" id="file" >输出结果</div>
    <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>素材输出地址</p>
            </div>
            <div class="weui-cell__ft" id="out1"> </div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>完整游戏资源地址</p>
            </div>
            <div class="weui-cell__ft" id="out2"> </div>
        </a>
		<a class="weui-cell weui-cell_access" href="javascript:;" onclick="playqr()">
		    <div class="weui-cell__bd">
		        <p>手机玩地址(点我)</p>
		    </div>
		    <div class="weui-cell__ft" id="playurl"> </div>
		</a>
    </div>
	<div id="qr" class='tcenter'></div>
</div>

<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">图片目录</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="path" placeholder="图片目录" type="text">
        </div>
        <div class="weui-cell__ft">
            <button  class="weui-vcode-btn" onclick="getfiles()">加载图片</button>
        </div>
    </div>
</div>

<div class="weui-cells__title" id="file" hidden>文件</div>
<div class="weui-cells" id="files">
    <!--
        <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>爱情</p>
        </div>
        <div class="weui-cell__ft">
            <select class="weui-select" name="fruit" >
                <option value="0" selected=false>葡萄</option>
                <option value="1" selected=true>樱桃</option>
                <option value="2" selected=false>橘子</option>
                <option value="3" selected=false>柠檬</option>
                <option value="4" selected=false>猕猴桃</option>
                <option value="5" selected=false>西红柿</option>
                <option value="6" selected=false>桃</option>
                <option value="7" selected=false>菠萝</option>
                <option value="8" selected=false>椰子</option>
                <option value="9" selected=false>半西瓜</option>
                <option value="10" selected=false>西瓜</option>
            </select>
        </div>
    </a>
    -->
</div>

<br>
<br>
<div class="loading2 hide" data-text="加载中..."></div>

<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__links">
        <a href="http://mp.weixin.qq.com/s?__biz=MzI0NTg3MTMwNw==&mid=100001662&idx=1&sn=9149ff0dd9a48c9caae722be41b5195e&chksm=6946a0da5e3129cca80ae42dca0a397359c84201a45756af31cae7012eea3b53ab9ebeec7dee#rd" class="weui-footer__link">给我一碗炒饭</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; 2019-2021</p>
</div>
</body>
<script>
    var files=[];
    var path="";
	$.noti({
	    title: "「给我一碗炒饭」提醒您",
	    text: "使用前一定要看使用说明哦！点我即可跳转",
	    media: "<img src='/static/img/gzh.jpeg' />",
	    time: 3000,
	    onClick: function(data) {
	        window.location.href="http://mp.weixin.qq.com/s?__biz=MzI0NTg3MTMwNw==&mid=100001717&idx=1&sn=533d2acfcd3616f11b2726e80b15eede&chksm=6946a0115e31290759617e0e60fa4afd4b17c95ceac2c2987830564a17160f8a35af8eac28d5#rd";
			
	    }
	});
    function clearinfo(){
        $("#files").html("");
        $("#path").val("");
        $("#show").html("给我一碗炒饭出品");
		$("#play").remove();
		$("#out1").html("");
		$("#out2").html("");
		$("#playurl").html("");
		$("#showinfo").addAttr('hidden');
		$("#qr").empty();
    }
    function getfiles() {
        var file = $("#file");
        path=$("#path").val();
        if(path==""){
            $.toptip("目录不能为空");
            return 0;
        }
		loadshow();
        $.ajax({
            url: "/gf?path="+path,
            success: function(res){
				loadhide();
                files=res.filepath;
                if(res.filepath.length!=0){
                    if(res.filepath.length>11){
						loadhide();
                        $.toptip("照片数量大于11张,请删除后重试");
                        return 0;
                    }else{
                        file.removeAttr('hidden');
                    }
                }else{
					loadhide();
                    $.toptip("该目录无文件");
                    return 0;
                }
                for(var i=0;i<res.filepath.length;i++){
                    var s=["","","","","","","","","","",""]
                    var a='<div class="weui-cells" id="files"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd">'+
                        '<p>[filename]</p></div>'+
                        '<div class="weui-cell__ft">'+
                        '<select class="weui-select" id="fruit[fruit]" ><option value="0" [s1]>葡萄</option><option value="1" [s2]>樱桃</option><option value="2" [s3]>橘子</option><option value="3" [s4]>柠檬</option><option value="4" [s5]>猕猴桃</option><option value="5" [s6]>西红柿</option><option value="6" [s7]>桃</option><option value="7" [s8]>菠萝</option><option value="8" [s9]>椰子</option><option value="9" [s10]>半西瓜</option><option value="10" [s11]>西瓜</option>'+
                        '</select></div></a></div>';
                    a=a.replace("[filename]",res.filepath[i]);
                    a=a.replace("[fruit]",i);
                    if(i<=10){
                        s[i]="selected";
                    }
                    a=a.replace("[s1]",s[0]);
                    a=a.replace("[s2]",s[1]);
                    a=a.replace("[s3]",s[2]);
                    a=a.replace("[s4]",s[3]);
                    a=a.replace("[s5]",s[4]);
                    a=a.replace("[s6]",s[5]);
                    a=a.replace("[s7]",s[6]);
                    a=a.replace("[s8]",s[7]);
                    a=a.replace("[s9]",s[8]);
                    a=a.replace("[s10]",s[9]);
                    a=a.replace("[s11]",s[10]);
                    $("#files").append(a);
                }
                var btn='<div class="weui-btn-area"><a class="weui-btn weui-btn_primary" href="javascript:" onclick="create()" id="btn">生成图片</a></div>'
                $("#files").append(btn);
            }
        });
        /**
        var code = $(obj);
        if (countdown == 0) {
            code.removeAttr('disabled');
            code.text("获取验证码");
            countdown =60;
            return;
        } else {
            code.text("重新发送(" + countdown + ")");
            code.attr('disabled',true);
            countdown--;
        }
        */

        }
    function create(){
		loadshow();
        var postdata={"data":[],"path":path}
        for(var i=0;i<files.length;i++){
            var t=$("#fruit"+i).val();
            postdata.data.push({"filename":files[i],"id":t})
        }
        $.ajax({
            url: "/create",
            type:"POST",
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            },
            data:JSON.stringify(postdata),
            success: function(res){
                if(res.code==1){
					loadhide();
                    $.toptip("生成成功","success");
                    $("#out1").html(res.message);
                    var btn='<div class="weui-btn-area"><a class="weui-btn bg-blue" onclick="clearinfo()"><i class="icon icon-23"></i>删除信息</a></div>'
                    $("#files").append(btn);
					play();
                }else{
                    $.toptip("生成失败","success");
                }
            }
        })
    }
	function play(){
	    $.ajax({
	        url: "/play",
	        success: function(res){
	            if(res.code==1){
	                $.toptip("完整游戏资源生成成功","success");
					var url=res.url;
					//$("#show").append('"<br/><a>在线游玩地址为:http://127.0.0.1:5000'+url+'</a>');
					if(res.ip!=""){
						$("#playurl").html("http://"+res.ip+":5000"+url);
					}else{
						$("#playurl").html("获取本地IP失败");
					}
					$("#out2").html(res.path);
	                var btn='<a id="play" target="_blank" href="'+url+'" class="weui-btn weui-btn_mini weui-btn weui-btn_warn">点我直接玩</a>'
	                $(".btnclass").append(btn);
					$("#showinfo").removeAttr('hidden');
	            }else{
	                $.toptip("生成失败");
	            }
	        }
	    })
	}
    function loadshow(){
		$(".loading2").show();
	}
	function loadhide(){
		$(".loading2").hide();
	}
	$(function(){
	});
	function image2canvas(image){
	    var canvas = document.createElement("canvas");
	    canvas.width = image.width;
	    canvas.height = image.height;
	    canvas.getContext("2d").drawImage(image,0,0);
	    return canvas;
	}
	function canvas2image(canvas){
	    var image = new Image();
	    image.src = canvas.toDataURL("image/png");
	    return image;
	}
	function qr(txt){
	    const canvas = qrcanvas.qrcanvas({data:txt,size:200,foreground:'green',background:'white'});
	
	    $("#qr").empty().html(canvas2image(canvas))
	}
	function playqr(){
		var u=$("#playurl").html();
		$.toptip("手机必须在同一局域网内哦","success");
		qr(u);
	}
</script>
</html>